<template>
    <ElForm class="shop-item" label-width="110px" label-position="left">
        <div class="shop-item-header">
            <div class="shop-item-title">
                <div style="font-size: 18px;font-weight: bold;">{{ data.ywmc }}</div>
            </div>
            <div>
                <ElButton type="primary" v-if="auth.has('edit')" link @click="$emit('edit')">编辑</ElButton>
                <ElButton type="primary" link @click="$emit('copy')">复制</ElButton>
                <ElButton type="primary" link @click="openZzhList">子账号</ElButton>
                <ElButton v-if="data.isMasterVal === '是'" type="primary" link @click="openScsk">首次收款</ElButton>
                <ElButton type="danger" link @click="lossRegistration(data)" :disabled="data.ywhzztVal !== '正在合作'">流失登记
                </ElButton>
            </div>
        </div>

        <!-- 业务明细 -->
        <div class="group-title">业务明细</div>
        <ElRow>
            <ElCol :span="6">
                <ElFormItem label="业务条线">{{ data.ywtxName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="业务类型">{{ data.ywlxName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="服务班次">{{ data.fwbcName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="服务类型">{{ data.fwlxName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="收费模式">{{ data.sfmsName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="是否为主业务">{{ data.isMasterName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="付款方式">{{ data.fkfsName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="咨询量">{{ data.ywZxl }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="业务底薪">{{ data.ywdx }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="提成点数(%)">{{ data.tcds }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="首次合作时间">{{ data.ywschzsj }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="业务开始时间">{{ data.ywkssj }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="业务结束时间">{{ data.ywjssj }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="ERP操作">{{ data.erpczName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="运仓对接">{{ data.ycdjName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="业务合作状态">{{ data.ywhzztName }}</ElFormItem>
            </ElCol>
            <ElCol :span="24">
                <ElFormItem label="业务备注">{{ data.ywbz }}</ElFormItem>
            </ElCol>
        </ElRow>

        <!-- 数据要求 -->
        <div class="group-title">数据要求</div>
        <ElRow>
            <ElCol :span="6">
                <ElFormItem label="转化率">{{ data.zhl }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="平均响应">{{ data.pjxy }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="满意度">{{ data.myd }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="退款时长">{{ data.tksc }}</ElFormItem>
            </ElCol>
        </ElRow>

        <!-- 开票内容 -->
        <div class="group-title">开票内容</div>
        <ElRow>
            <ElCol :span="6">
                <ElFormItem label="是否开票">{{ data.sfkpName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="开票节点">{{ data.kpjdName }}</ElFormItem>
            </ElCol>
            <ElCol :span="6">
                <ElFormItem label="公司承担比例(%)">{{ data.gscdbl }}</ElFormItem>
            </ElCol>
        </ElRow>
    </ElForm>

    <ElDialog v-model="zzhListObj.isShow" title="子账号列表" width="60%">
        <div style="display: flex; justify-content: flex-end; margin-top: 10px;margin-right: 10px;margin-bottom: 10px;">
            <ElButton type="primary" @click="openAddZzh">添加子账号</ElButton>
        </div>
        <ElTable class="list-table is-border" height="700" :="$attrs" :data="zzhList" border>
            <ElTableColumn label="数据账号" prop="sjzh" align="center"></ElTableColumn>
            <ElTableColumn label="子账号名称" prop="zzhmc" align="center"></ElTableColumn>
            <ElTableColumn label="子账号密码" prop="zzhmm" align="center"></ElTableColumn>
            <ElTableColumn label="录入方式" prop="lrfsName" align="center"></ElTableColumn>
            <ElTableColumn prop="_action" label="操作" fixed="right" :min-width="90" header-align="center" align="center">
                <template #default="{ row }">
                    <ElButton type="primary" link @click="openEditZzh(row)">编辑</ElButton>
                </template>
            </ElTableColumn>
        </ElTable>
    </ElDialog>

    <ElDialog v-model="scskObj.isShow" title="首次收款" width="75%">
        <div
            style="width: calc(100% - 10px); text-align: right; margin-bottom: 10px; margin-top: 10px; margin-right: 10px;">
            <ElButton type="primary" @click="addSkObj">添加</ElButton>
        </div>
        <ElTable class="list-table is-border" :="$attrs" border :data="scskObj.scskList">
            <ElTableColumn label="收款类型">
                <template #default="{ row, $index }">
                    <ElFormItem :prop="`skList.${$index}.sklxVal`">
                        <ElSelect v-model="row.sklxVal" clearable>
                            <ElOption v-for="item in sklx" :key="item.val" :label="item.name" :value="item.val" />
                        </ElSelect>
                    </ElFormItem>
                </template>
            </ElTableColumn>
            <ElTableColumn label="收款金额">
                <template #default="{ row, $index }">
                    <ElFormItem :prop="`skList.${$index}.skje`">
                        <ElInput v-model="row.skje"></ElInput>
                    </ElFormItem>
                </template>
            </ElTableColumn>
            <ElTableColumn label="收款状态">
                <template #default="{ row, $index }">
                    <ElFormItem :prop="`skList.${$index}.skztVal`">
                        <ElSelect v-model="row.skztVal" clearable>
                            <ElOption v-for="item in skzt" :key="item.val" :label="item.name" :value="item.val" />
                        </ElSelect>
                    </ElFormItem>
                </template>
            </ElTableColumn>
            <ElTableColumn label="收款时间">
                <template #default="{ row, $index }">
                    <ElFormItem :prop="`skList.${$index}.sksj`">
                        <ElDatePicker v-model="row.sksj" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" clearable />
                    </ElFormItem>
                </template>
            </ElTableColumn>
            <ElTableColumn label="收款渠道">
                <template #default="{ row, $index }">
                    <ElFormItem :prop="`skList.${$index}.skqdVal`">
                        <ElSelect v-model="row.skqdVal" clearable>
                            <ElOption v-for="item in skqd" :key="item.val" :label="item.name" :value="item.val" />
                        </ElSelect>
                    </ElFormItem>
                </template>
            </ElTableColumn>
            <ElTableColumn label="是否开票">
                <template #default="{ row, $index }">
                    <ElFormItem :prop="`skList.${$index}.sfkpVal`">
                        <ElSelect v-model="row.sfkpVal" clearable>
                            <ElOption v-for="item in sfkp" :key="item.val" :label="item.name" :value="item.val" />
                        </ElSelect>
                    </ElFormItem>
                </template>
            </ElTableColumn>
            <ElTableColumn label="开票状态">
                <template #default="{ row, $index }">
                    <ElFormItem :prop="`skList.${$index}.kpztVal`">
                        <ElSelect v-model="row.kpztVal" clearable>
                            <ElOption v-for="item in kpzt" :key="item.val" :label="item.gsmc" :value="item.val" />
                        </ElSelect>
                    </ElFormItem>
                </template>
            </ElTableColumn>
            <ElTableColumn label="备注">
                <template #default="{ row }">
                    <ElInput v-model="row.bz"></ElInput>
                </template>
            </ElTableColumn>
            <ElTableColumn label="创建人">
                <template #default="{ row }">
                    <ElInput v-model="row.createUserName" :disabled="true"></ElInput>
                </template>
            </ElTableColumn>
        </ElTable>

        <template #footer>
            <div style="text-align: left;margin-left: 10px;margin-bottom: 10px;">
                <ElButton type="primary" @click="saveSkData" style="margin-left: 10px;">保存</ElButton>
                <ElButton @click="scskObj.isShow = false">取消</ElButton>
            </div>
        </template>
    </ElDialog>

</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElButton, ElRow, ElCol, ElForm, ElFormItem, ElTableColumn, ElMessage } from 'element-plus'
import { useAuth } from '@/utils/auth'
import { getZzhListByYwId, getScskList, postScsk } from '../api';
import { getDictInfo } from '@/views/menus/n-renew-manage-new/api';
import { addZzhDialog } from '../dialog/addZzh';
import { endYwDialog_zyw } from '../dialog/endYw';


const auth = useAuth()

interface Props {
    data: object
}

const props = withDefaults(defineProps<Props>(), {
    data: () => ({})
})

const data = props.data as any

const zzhListObj = reactive({
    isShow: false
});
const zzhList = ref([])

const openZzhList = async () => {
    await getZzhList();
    zzhListObj.isShow = true;
}

// 获取子账号列表
const getZzhList = async () => {
    let res = await getZzhListByYwId(data);
    zzhList.value = res;
}

const openAddZzh = async () => {
    const customerShopBusinessId = data.customerShopBusinessId;
    await addZzhDialog.title('新增子账号').open({ row: { customerShopBusinessId } })
    await getZzhList();
}

const openEditZzh = async (row) => {
    await addZzhDialog.title('修改子账号').open({ row })
    await getZzhList();
}

let sklx = ref([]);
let skzt = ref([]);
let skqd = ref([]);
let sfkp = ref([]);
let kpzt = ref([]);

onMounted(async () => {
    sklx.value = await getDictInfo("sklx");
    skzt.value = await getDictInfo("skzt");
    skqd.value = await getDictInfo("skqd");
    sfkp.value = await getDictInfo("sfkp");
    kpzt.value = await getDictInfo("kpzt");
})

const scskObj = reactive({
    isShow: false,
    scskList: [],
    renewBatchId: ''
});

const openScsk = async () => {
    // 后端获取该业务首次收款数据
    let res = await getScskList({ customerShopBusinessId: data.customerShopBusinessId });
    scskObj.scskList = res.skList;
    scskObj.renewBatchId = res.renewBatchId;
    scskObj.isShow = true;
}

const addSkObj = () => {
    scskObj.scskList.push({
        'kpztVal': '未开票'
    });
}

const saveSkData = async () => {
    let res = await postScsk({ renewBatchId: scskObj.renewBatchId, scskList: scskObj.scskList, customerShopBusinessId: data.customerShopBusinessId });
    ElMessage.success('操作成功')
    scskObj.isShow = false;
}

const lossRegistration = async (ywObj) => {
    // 判断是否为主业务
    const sfmsVal = ywObj.sfmsVal;
    const isMasterVal = ywObj.isMasterVal;
    if (sfmsVal != '单独收费' && sfmsVal != '无需收费') {
        if (isMasterVal === '是') {
            await endYwDialog_zyw.title('结束业务').open({ row: ywObj })
        }
    }
    console.log(ywObj);
}

</script>

<style scoped lang="scss">
.shop-item {
    padding-top: 18px;
    margin-bottom: 18px;

    &+& {
        border-top: 1px solid #E1E1E1;
        ;
    }

    &-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    &-title {
        display: flex;
        align-items: center;
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
    }

    &-tag {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 64px;
        height: 22px;
        background: #094DB2;
        border-radius: 2px;
        font-family: PingFangHK-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #FFFFFF;
        text-align: right;
        margin-right: 5px;
    }

    .group-title {
        font-size: 16px;
        font-weight: bold;
        margin: 20px 0 10px 0;
        padding: 4px 0 4px 10px; // 调整上下padding
        border-left: 4px solid #409EFF;
        color: #333;
        line-height: 0.8; // 控制行高
    }

    :deep(.el-form-item__label) {
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 12px;
        color: #666666;
        text-align: right;
    }

    :deep(.el-form-item__content) {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 12px;
        color: #333333;
    }
}
</style>